<template>
	
	<div class="swiper down-swiper">
		<!-- 主体滑动区 -->
	   <ul class="swiper-wrapper">
		   
			<li class="swiper-slide" v-for="item in imgs" :key="item.id">
				<img :src="item.img" />
			</li>
			
	   	</ul>
	   				
		<div class="swiper-pagination down_pagination"></div>
		
	</div>
	

</template>

<script>
	
	import { onMounted } from 'vue';
	
	//引入Swiper的动态组件
	import Swiper , {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper';
	
	//3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination]);
	export default{
		name:'Down',
		data(){
			return{
				imgs:[
					{id:1,img:'imgs/swiper1.jfif'},
					{id:2,img:'imgs/swiper2.jfif'},
					{id:3,img:'imgs/swiper3.jpeg'},
				]
			}
		},
		
			setup(){
				onMounted( ()=>{
					new Swiper( '.down-swiper' , {
						//循环播放
						loop : true,
						//设置分页器效果,具体做挂在区域	
						pagination:{
							el: '.down_pagination'
						},
						autoplay:{
							delay:1500,
							stopOnLastSlide:false,
							disableOnInteraction:false
						}
					})
				})
			}
		
	}
</script>

<style scoped>
	/* 轮播区域的样式 */
	.down-swiper{
		width: 100%;
		height: 5.6rem;
	}
	.down-swiper img{
		width: 100%;
		height: 100%;
	}
	
	/* 穿透 */
	.down_pagination :deep(.swiper-pagination-bullet-active){
		background-color: white;
	}
</style>
